<template>
  <div style="padding-bottom: 32px;">
    <div class="topView">
      <div class="nameLabel">学习值排行榜</div>
      <p class="moreBtn" @click="moreClick">更多</p>
    </div>

    <div v-if="countList.length > 0">
      <ve-bar :settings="chartSettings"
              :height="chartData.rows.length * 36 + 'px'"
              :data="chartData"
              :legend-visible="false"
              :grid="grid"
              :extend="chartExtend"
              :colors="colors">
      </ve-bar>
    </div>
    <div v-else>
      <van-empty description="暂无数据"/>
    </div>

  </div>
</template>

<script>

  // import Vue from 'vue'
  import {Empty} from 'vant'
  // import VCharts from 'v-charts'
  //
  // Vue.use(VCharts)
  Vue.use(Empty)

  export default {
    name: "CountChart",
    props: {
      countList: {
        type: Object,
        default: []
      }
    },
    watch: {
      countList: function (val) {
        this.chartData.rows = val
      }
    },
    data() {
      this.colors = ["#1DA1F2"]
      this.chartSettings = {
        dataOrder: {
          label: '学习值',
          order: 'desc'
        }
      }
      this.grid = {
        top: 0,
        bottom: 0,
        left: 16,
        right: 32,
      }
      this.chartExtend = {
        series(v) {
          v.forEach(i => {
            i.barWidth = 20
          })
          return v
        }
      }
      return {
        chartData: {
          columns: ['名字', '学习值'],
          rows: this.countList
        }
      }
    },
    methods: {
      moreClick() {
        this.$emit('sendMoreClick')
      }
    }
  }
</script>

<style scoped>
  .topView {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 0px 16px 16px;
  }
  .moreBtn {
    padding: 0 16px;
    font-size: 14px;
    color: #1DA1F2;
  }
  .nameLabel {
    font-size: 16px;
    font-weight: bold;
  }
</style>
